<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui table模块，单元格可编辑 - 在线演示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <script>
        ; !function () { self !== parent && (location.href = "//www.baidu.com/") }();
    </script>
    <link rel="stylesheet" href="../../layui/dist/css/layui.css?t=1632659138211" media="all">
    <link rel="stylesheet" href="../../static/css/global.css?t=1632659138211-19" media="all">
</head>

<body>
    <div class="layui-layout layui-layout-admin">        <div class="layui-header header header-demo">
            <div class="layui-fluid">
                <a class="logo" href="/">
                    <img src="../../static/images/layui/logo.png" alt="layui">
                </a>
                <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
                <div class="layui-hide-xs site-notice"></div>

                <ul class="layui-nav" id="LAY_NAV_TOP">
                    <li class="layui-nav-item ">
                        <a href="/doc/">文档</a>
                    </li>
                    <li class="layui-nav-item layui-this">
                        <a href="/demo/">示例</a>
                    </li>

                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>-->
                            周边
                        </a>
                        <dl class="layui-nav-child layui-nav-child-c">
                            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
                                <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
                                <hr>
                            </dd>

                            <dd lay-unselect><a href="/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
                            <dd lay-unselect><a href="../../extend/" target="_blank">扩展组件</a></dd>
                        </dl>
                    </li>

                    
                </ul>
            </div>
        </div>

        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">

                <ul class="layui-nav layui-nav-tree site-demo-nav">

                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="javascript:;" href="javascript:;">演示</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="/demo/">调试预览</a>
                            </dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="javascript:;" href="javascript:;">布局</a>
                        <dl class="layui-nav-child">
                            <dd class="">
                                <a href="/demo/grid.html">栅格</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/admin.html">框架</a>
                            </dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="javascript:;" href="javascript:;">基本元素</a>
                        <dl class="layui-nav-child">
                            <dd class="">
                                <a href="/demo/button.html">按钮</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/form.html">表单</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/nav.html">导航 / 面包屑</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/menu.html">基础菜单</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/tab.html">选项卡</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/progress.html">进度条</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/panel.html">面板</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/badge.html">徽章</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/timeline.html">时间线</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/table-element.html">静态表格</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/anim.html">动画</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/auxiliar.html">辅助元素</a>
                            </dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="javascript:;" href="javascript:;">组件示例</a>
                        <dl class="layui-nav-child">
                            <dd class="">
                                <a href="/demo/layer.html">
                                    弹出层
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/laydate.html">
                                    日期与时间选择
                                </a>
                            </dd>
                            <dd class="layui-this">
                                <a href="/demo/table.html">
                                    数据表格
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/laypage.html">
                                    分页
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/dropdown.html">
                                    下拉菜单
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/upload.html">
                                    文件上传
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/transfer.html">
                                    穿梭框
                                </a>
                            </dd>

                            <dd class="">
                                <a href="/demo/tree.html">
                                    树形组件
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/colorpicker.html">
                                    颜色选择器
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/slider.html">
                                    滑块
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/rate.html">
                                    评分
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/carousel.html">
                                    轮播
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/laytpl.html">
                                    模板引擎
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/flow.html">
                                    流加载
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/util.html">
                                    工具模块
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/code.html">
                                    文本行修饰
                                </a>
                            </dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
                </ul>

            </div>
        </div>

        <style>
            body .site-demo-title,
            body .layui-layout-admin .site-demo {
                left: 360px
            }

            .layui-layout-admin .site-demo-body {
                top: 107px;
            }

            body .site-demo-code {
                left: 160px;
            }
        </style>
        <div class="layui-side layui-side-child">
            <div class="layui-side-scroll">
                <!-- 左侧子菜单 -->
                <ul class="layui-nav layui-nav-tree site-demo-table-nav">
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" class="layui-nav-title" href="/demo/table.html">简单数据表格</a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/auto.html">列宽自动分配<span
                                class="layui-badge-dot"></span></a>
                    </li>

                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/data.html">赋值已知数据</a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/static.html">转化静态表格</a>
                    </li>

                    <hr>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/page.html">开启分页</a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/resetPage.html">自定义分页</a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/toolbar.html">开启头部工具栏<span
                                class="layui-badge-dot"></span></a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/totalRow.html">开启合计行<span
                                class="layui-badge-dot"></span></a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/checkbox.html">开启复选框</a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/radio.html">开启单选框<span
                                class="layui-badge-dot"></span></a>
                    </li>
                    <li class="layui-nav-item layui-this">
                        <a class="layui-nav-title" href="/demo/table/cellEdit.html">开启单元格编辑</a>
                    </li>
                    <hr>

                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/form.html">加入表单元素</a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/style.html">设置单元格样式</a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/fixed.html">固定列</a>
                    </li>

                    <hr>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/operate.html">数据操作</a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/parseData.html">解析任意数据格式<span
                                class="layui-badge-dot"></span></a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/onrow.html">行事件<span
                                class="layui-badge-dot"></span></a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/reload.html">数据表格的重载</a>
                    </li>
                    <hr>

                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/height.html">高度最大化适应</a>
                    </li>
                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/initSort.html">设置初始排序</a>
                    </li>                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/cellEvent.html">单元格事件</a>
                    </li>

                    <li class="layui-nav-item ">
                        <a class="layui-nav-title" href="/demo/table/thead.html">复杂表头</a>
                    </li>

                    <hr>
                    <li class="layui-nav-item">
                        <a class="layui-nav-title" href="/doc/modules/table.html" target="_blank">更多用法见文档</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
            <ul class="layui-tab-title site-demo-title">
                <li class="layui-this">预览</li>
                <li>查看代码</li>
                <li>帮助</li>
            </ul>
            <div class="layui-body layui-tab-content site-demo site-demo-body">
                <div class="layui-tab-item layui-show">
                    <div class="layui-main">
                        <div id="LAY_preview">

                            <table class="layui-table"
                                lay-data="{url:'../../json/user.json', id:'test3', escape: true}" lay-filter="test3">
                                <thead>
                                    <tr>
                                        <th lay-data="{type:'checkbox'}">ID</th>
                                        <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                                        <th lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th>
                                        <th lay-data="{field:'email', edit: 'text', minWidth: 150}">邮箱</th>
                                        <th lay-data="{field:'sex', width:80, edit: 'text'}">性别</th>
                                        <th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th>
                                        <th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th>
                                    </tr>
                                </thead>
                            </table>

                        </div>

                        <blockquote class="layui-elem-quote" style="margin-top: 30px;">
                            更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
                        </blockquote>
                        <div style="margin: 15px 0 100px; padding-bottom: 100px;">
                            <!-- 通用-970*90 -->
                            <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px"
                                data-ad-client="ca-pub-6111334333458862" data-ad-slot="6835627838"></ins>
                        </div>
                    </div>
                </div>                <div class="layui-tab-item">
                    <textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode"
                        spellcheck="false" readonly>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
</textarea>
                </div>                <div class="layui-tab-item">
                    <div class="layui-main">
                        <p></p>
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                            <legend>相关</legend>
                        </fieldset>
                        <a class="layui-btn layui-btn-normal" href="/doc/modules/table.html" target="_blank">表格模块文档</a>
                    </div>
                </div>            </div>
        </div>

        
        <script>
            window.global = {
                pageType: 'demo'
                , preview: function () {
                    var preview = document.getElementById('LAY_preview');
                    return preview ? preview.innerHTML : '';
                }()
            };
        </script>
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <div class="site-tree-mobile layui-hide">
            <i class="layui-icon layui-icon-spread-left"></i>
        </div>
        <div class="site-mobile-shade"></div>

        <script src="../../layui/dist/layui.js?t=1632659138211" charset="utf-8"></script>
        <script>
            layui.config({
                base: '../../static/lay/modules/layui/'
                , version: '1632659138211'
            }).use('global');
        </script>

        <script>
            var _hmt = _hmt || [];
            (function () {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?d214947968792b839fd669a4decaaffc";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script>

    </div>
    <div id="LAY_democodejs">
        <script>
            layui.use(['table', 'util'], function () {
                var table = layui.table
                    , util = layui.util;

                //监听单元格编辑
                table.on('edit(test3)', function (obj) {
                    var value = obj.value //得到修改后的值
                        , data = obj.data //得到所在行所有键值
                        , field = obj.field; //得到字段
                    layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改值为：' + util.escape(value));
                });
            });
        </script>
    </div>
</body>

</html>